<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">{{message}}</div>
<script>
  // let(变量）/const（常量）
  // 编程范式：声明式编程

  // 创建Vue对象的时候，传入了一些option:{}
  // {}中包含了el属性：该属性决定了这个Vue对象挂载到哪一个元素上，
  // 很明显，这里是挂载到了id为app的元素上
  // {}中包含了data属性：该属性中通常会存储一些数据
  // 这些数据可以是我们直接定义出来的，比如像上面这样
  // 也可能是来自网络，从服务器加载的
  const app = new Vue({
    el: "#app",//用于挂载管理的元素
    data:{//定义数据
      message:"Hello zk I am Vue !"
    }
  })
  //传统js的做法（编程范式：命令式编程）
  //1.创建div元素，设置id属性
  //2.定义一个变量叫message
  //3.message变量放在前面的div元素中显示
</script>
</body>
</html>
